<template>
  <div style="display: flex; flex-direction: column; align-items: center">
    <!--    材料提成/门店卸货提成-->
    <div class="box" v-if="['1'].includes(valueData)">
      <p>
        {{ title }}固定金额：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.materialFixedAmount"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
    <div class="box" v-if="['4'].includes(valueData)">
      <p>
        {{ title }}固定金额：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.storeUnloadFixedAmount"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
    <!--    仓库拣货提成-->
    <div class="box" v-if="['8'].includes(valueData)">
      <p>
        <span>仓储架固定金额：</span>
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.storageRackFixedAmount"
        ></el-input>
      </p>
      <p>
        <span>营业区套件基准价：</span>
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.businessAreaKitBasePrice"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
    <!--    门店安装提成-->
    <div class="box" v-if="['9'].includes(valueData)">
      <p>
        营业区组数基准价(装)：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.installGroupBasePrice"
        ></el-input>
      </p>
      <p>
        仓储区组数基准价(装)：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.installGroupBasePriceCk"
        ></el-input>
      </p>
      <p>
        收银台安装基准价：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.installCashierBasePrice"
        ></el-input>
      </p>
      <p>
        <span>地柜安装基准价：</span>
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.installDoorFixedAmount"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
    <!--  门店拆店提成  -->
    <div class="box" v-if="['10'].includes(valueData)">
      <p>
        营业区组数基准价(拆)：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.dismantleBasePrice"
        ></el-input>
      </p>
      <p>
        仓储区组数基准价(拆)：
        <el-input
            size="small"
            style="width: 500px"
            v-model="commonData.dismantleBasePriceCk"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
    <!--    零时工扣除提成-->
    <div class="box" v-if="['11'].includes(valueData)">
      <p>
        一个零时工扣除提成：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.tempWorkerDeductionAmount1"
        ></el-input>
      </p>
      <p>
        二个零时工扣除提成：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.tempWorkerDeductionAmount2"
        ></el-input>
      </p>
      <p>
        三个零时工扣除提成：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.tempWorkerDeductionAmount3"
        ></el-input>
      </p>
      <p>
        四个零时工扣除提成：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.tempWorkerDeductionAmount4"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
          v-prevent-re-click
      >保 存
      </el-button>
    </div>
    <!-- 门店装货提成 -->
    <div class="box" v-if="['13'].includes(valueData)">
      <p>
        门店装货提成固定及金额：
        <el-input
            size="small"
            style="width: 500px"
            v-model.number="commonData.storePickFixedAmount"
        ></el-input>
      </p>
      <el-button
          size="small"
          type="primary"
          style="margin-left: 50px"
          @click="keepData(commonData, valueData)"
      >保 存
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commonCommission',
  props: {
    commonData: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: '',
    },
    valueData: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  watch: {},
  methods: {
    keepData(val, type) {
      const {
        materialFixedAmount,
        storeUnloadFixedAmount,
        businessAreaKitBasePrice,
        storageRackFixedAmount,
        installGroupBasePrice,
        installGroupBasePriceCk,
        installDoorFixedAmount,
        installCashierBasePrice,
        dismantleBasePrice,
        dismantleBasePriceCk,
        tempWorkerDeductionAmount1,
        tempWorkerDeductionAmount2,
        tempWorkerDeductionAmount3,
        tempWorkerDeductionAmount4,
        storePickFixedAmount,
      } = val
      switch (type) {
        case '1':
          const data1 = {materialFixedAmount, commissionType: type}
          this.submitData(data1)
          break
        case '4':
          const data2 = {storeUnloadFixedAmount, commissionType: type}
          this.submitData(data2)
          break
        case '8':
          const data3 = {
            businessAreaKitBasePrice,
            storageRackFixedAmount,
            commissionType: type,
          }
          this.submitData(data3)
          break
        case '9':
          const data4 = {
            installGroupBasePrice,
            installGroupBasePriceCk,
            installDoorFixedAmount,
            installCashierBasePrice,
            commissionType: type,
          }
          this.submitData(data4)
          break
        case '10':
          const data5 = {
            dismantleBasePrice,
            dismantleBasePriceCk,
            commissionType: type,
          }
          this.submitData(data5)
          break
        case '11':
          const data6 = {
            tempWorkerDeductionAmount1,
            tempWorkerDeductionAmount2,
            tempWorkerDeductionAmount3,
            tempWorkerDeductionAmount4,
            commissionType: type,
          }
          this.submitData(data6)
          break
        case '13':
          const data7 = {
            storePickFixedAmount,
            commissionType: type,
          }
          this.submitData(data7)
          break
        default:
          break
      }
    },
    submitData(a) {
      const data = {
        ...a,
        id: a.commissionType,
      }
      this.$api.commissionUpdateCommissionConfig(data).then((res) => {
        if (res == 1) {
          this.$message.success('提交成功！')
          this.$emit('addStatus', 1)
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 20px 0;

  p {
    margin-bottom: 15px;

    span {
      display: inline-block;
      width: 130px;
    }
  }
}
</style>
